<template>
	<div class="maskCenter">
		<div class="icon-div"><i class="el-icon-loading loadicon"></i></div>
		<div class="text-div">
			<span class="spantext">拼</span>
			<span class="spantext">命</span>
			<span class="spantext">加</span>
			<span class="spantext">载</span>
			<span class="spantext">中</span>
			<span class="spantext">.</span>
			<span class="spantext">.</span>
			<span class="spantext">.</span>
		</div>
	</div>
</template>

<script>
</script>

<style>
	.load-mask{
		width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 78px;
	    left: 0;    
	    z-index: 99;	    
	    align-items: center;
	    justify-content: center;
	    opacity: 0.2;
	    background: rgb(244, 249, 253);
	}
	.icon-div{
		margin-top: 20%;
		opacity: 1;
	}
	.loadicon{
		font-size: 90px;
    	color: #1231ca;
	}
	.text-div{
		opacity: 1;		
	}
	.spantext{
		margin-left: 4px;
		color: #2D8CF0;
		font-size: 26px;
		display: inline-block;
		animation: leSnake 1.5s ease-in-out; animation-iteration-count: infinite;
	}
	.spantext:nth-child(1){
		animation-delay: 0s;
	}
	.spantext:nth-child(2){
		animation-delay: 0.2s;
	}
	.spantext:nth-child(3){
		animation-delay: 0.4s;
	}
	.spantext:nth-child(4){
		animation-delay: 0.6s;
	}
	.spantext:nth-child(5){
		animation-delay: 0.8s;
	}
	.spantext:nth-child(6){
		animation-delay: 1s;
	}
	.spantext:nth-child(7){
		animation-delay: 1.2s;
	}
	.spantext:nth-child(8){
		animation-delay: 1.4s;
	}
	@keyframes leSnake {
    	from, to { transform: translateY(0px) }
    	50% { transform: translateY(30px) }
	}
</style>